<template>
  <van-tabbar v-model="active" @change="onchange">
    <van-tabbar-item icon="home-o">首页</van-tabbar-item>
    <van-tabbar-item icon="search">搜索</van-tabbar-item>
    <van-tabbar-item icon="setting-o">设置</van-tabbar-item>
  </van-tabbar>
</template>

<script>
  import {
    computed,
    defineComponent,
    ref,
    toRefs,
    onMounted,
    reactive,
    watch,
    getCurrentInstance,
  } from "vue";
  import tab_pages from '../../utils/constant/tab_pages.js'
  export default defineComponent({
    setup(props) {
      const { proxy } = getCurrentInstance();
      const data = reactive({
        form:{},
        active:0,
        tabs:tab_pages
      })
      onMounted(()=>{
        data.active = data.tabs.findIndex(val=>val===proxy.$route.path)
      })
      const onchange = (index) =>{
        proxy.$router.push(data.tabs[index])
      }
      return {
        ...toRefs(data),
        onchange
      };
    },
  });
</script>
<style scoped lang='less'>
</style>
<style lang='less'>
</style>